<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="number" label="数量">
        <template #default="scope">
          <el-input-number v-model="scope.row.number"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="总价">
        <template #default="scope">
          {{ computedTotal(scope.row) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useComputed } from "./useComputed";

const tableData = reactive([
  { name: "张三", price: 6000, number: 1 },
  { name: "李四", price: 7000, number: 1 },
  { name: "王五", price: 8000, number: 2 },
  { name: "赵六", price: 9000, number: 1 },
  { name: "孙七", price: 6000, number: 2 },
]);
const totalPrice = (row) => {
  console.log(22);
  return row.price * row.number;
};
const computedTotal = useComputed(totalPrice)
</script>

<style lang="scss" scoped></style>
